import './index.less'
import { useEffect, useState } from "react";
import { Flex, Card } from 'antd';
import classNames from 'classnames';
import Timeline from '../../components/Timeline';
import {getWorkExperience} from '@/api/api'

const Index = () => {
    const [count, setCount] = useState(null)
    const [workExperience, setWorkExperience] = useState(null)
    useEffect(()=>{
        async function getWorkExperienceFn(){
            let res = await getWorkExperience()
            setWorkExperience(res.reverse())
        }
        getWorkExperienceFn()
    },[])
    return (
        <div>
            <div className="index">
                <div className="title">
                    <span> &lt;开发者 /&gt;</span>，
                    <span className='Designer'>
                        <span className='corner'></span>
                        设计师</span>，
                    <br />
                    <span>搬砖人</span>，
                    <span className='Details'>
                        <span className='DetailsIcon '>
                            <svg
                                width="1em"
                                height="1em"
                                viewBox="0 0 24 24"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                                className="svgRotate">
                                <path d="M4.35 17.4V18.75M4.35 18.75V20.1M4.35 18.75H5.7M4.35 18.75H3M12.9 3L13.2202 5.51971C13.6243 8.69877 16.0808 11.2281 19.2467 11.7249L21 12L19.2467 12.2751C16.0808 12.7719 13.6243 15.3012 13.2202 18.4803L12.9 21L12.5798 18.4803C12.1757 15.3012 9.71919 12.7719 6.5533 12.2751L4.8 12L6.5533 11.7249C9.71919 11.2281 12.1757 8.69877 12.5798 5.51971L12.9 3ZM5.7 3L5.76713 3.40758C5.95525 4.54964 6.85036 5.44475 7.99242 5.63286L8.4 5.7L7.99242 5.76713C6.85036 5.95525 5.95525 6.85036 5.76713 7.99242L5.7 8.4L5.63286 7.99242C5.44475 6.85036 4.54964 5.95525 3.40758 5.76713L3 5.7L3.40758 5.63286C4.54964 5.44475 5.44475 4.54964 5.63286 3.40758L5.7 3Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                </path></svg></span>
                        <span className='DetailsText'>细节控。</span>
                    </span>
                </div>

                <div>
                    <span>
                        我是MooM，一个存活于互联网的边缘的搬砖人;<br />
                        我热爱开发，设计，创新，享受生活，以及在未知领域中探索。
                    </span>
                </div>
            </div>
            <div>
                <Flex gap="middle" vertical>
                    <Flex >
                        {
                            Array.from({
                                length: 4,
                            }).map((item, i) => (
                                <Card
                                    key={i}
                                    className={classNames("baseStyle", count === i && 'baseStyle-hover')}
                                    onMouseEnter={() => setCount(i)}
                                    onMouseLeave={() => setCount(null)}
                                    hoverable
                                    cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
                                >
                                   <span>还没有好的idea展示</span>
                                </Card>
                                
                            ))
                        }

                    </Flex>
                </Flex>
            </div>
            <div className='indexAbout'>
                <div className='aboutMoom'>
                    <h3>Abuot MOOM</h3>
                    <span>
                        MOOM这个怪兮兮的ID意为“月亮”，幕后工作者。
                        <br />
                        95后前端工作者，当然因为长期缺乏与人的技术交流且几乎没换过公司，代码写得相当混乱。
                        <br />
                        幸亏本身对前端也算得上热爱，倒也不排斥学新技术。
                        <br />
                        目前有前端开发、NodeJs开发、UI/UX 设计、内容创作等经验
                        <br />
                        性格以当今流行的MBTI<span style={{textDecoration:'line-through'}}>赛博占星</span>测试看属于ISFP-T。
                    </span>
                </div>
                <div style={{display:'flex', justifyContent:'center', flexDirection: 'column',textAlign:'right',}}>
                    <h3 style={{marginRight:'20px'}}>工作经历</h3>
                    <Timeline data={workExperience} />
                </div>

            </div>

            {/* <div className='test'></div> */}
        </div>
    )
}
export default Index